<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .swipe {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap .swipe-con {
            float: left;
            position: relative;
        }

        .swipe-wrap .swipe-con img {
            width: 100%;
            vertical-align: middle;
        }

        #main {
            padding: 2px;
            background-color: #e5e5e5;
        }

        #main .flex-vertical .layout {
            background: #e66961 url() right bottom no-repeat;
            margin: .3rem;
            padding: .3rem;
            background-size: auto 50%;
            line-height: 2rem;
            color: white;
            font-size: 1.8rem;
        }

        #main .flex-vertical .layout p {
            font-size: 1rem;
        }

        #main .flex-vertical .layout.ic-hot {
            background-image: url(../image/ic-hot.png);
        }

        #main .flex-vertical .layout.ic-article {
            background-image: url(../image/ic-article.png);
            background-color: #6ab494;
        }

        #main .flex-vertical .layout.ic-tag {
            background-image: url(../image/ic-tag.png);
            background-color: #9e9a8d;
            font-size: 1.6rem;
        }

        #main .flex-vertical .layout.ic-coffee {
            background-image: url(../image/ic-coffee.png);
            background-color: #ebd275;
            font-size: 1.6rem;
        }

        #main .flex-vertical .layout.ic-shop {
            background-image: url(../image/ic-shop.png);
            background-color: #6ab494;
        }

        #main .flex-vertical .layout.ic-like {
            background-image: url(../image/ic-like.png);
            background-color: #d8c09d;
            font-size: 1.6rem;
        }

        #main .flex-vertical .layout.ic-lable {
            background-image: url(../image/ic-lable.png);
            font-size: 1.2rem;
        }

        #main .flex-vertical .layout.ic-more {
            background-image: url(../image/ic-more.png);
            background-color: #ebd275;
            font-size: 1.2rem;
            background-size: 50% auto;
            background-position: center right;
        }

        .flex-2 {
            -webkit-box-flex: 2;
            -webkit-flex: 2;
            flex: 2;
        }

        .hover {
            opacity: .8;
        }

        img {
            transform: scale(0.98);
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to
        /* .fade-leave-active below version 2.1.8 */

        {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <div class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-con">
                    <img src="../image/lunbo1.jpg" alt="校园风光">
                </div>
                <div class="swipe-con">
                    <img src="../image/lunbo2.jpg" alt="校园风光">
                </div>
                <div class="swipe-con">
                    <img src="../image/lunbo3.jpg" alt="校园风光">
                </div>
                <div class="swipe-con">
                    <img src="../image/lunbo5.jpg" alt="校园风光">
                </div>
            </div>
        </div>
        <div id="main" class="flex-wrap flex-con">
            <div class="flex-con flex-wrap flex-vertical">
                <div tapmode="hover" @click="toSchoolInfoPage" class="flex-wrap flex-con flex-2 layout-wrap">
                    <div class="flex-con layout ic-hot">
                        <h6 v-if="school">学校简介</h6>
                        <p v-if="school">{{school.introduction}}</p>
                    </div>
                </div>
                <div tapmode="hover" @click="toSchoolSceneryPage" class="flex-wrap flex-con flex-2 layout-wrap">
                    <div class="flex-con layout ic-tag">
                        <h6>校园风光</h6>
                        <p v-if="school">{{school.scenery}}</p>
                    </div>
                </div>
                <div tapmode="hover" @click="toRouteQueryPage" class="flex-wrap flex-con layout-wrap">
                    <div class="flex-con layout  ic-article">
                        <h6>路线查询</h6>
                        <p>怎么走才最省时间</p>
                    </div>
                </div>
            </div>
            <transition name="fade">
                <div v-show="editor" class="flex-wrap flex-con flex-vertical">
                    <div @click="toSchoolEditPage"  tapmode="hover" class="flex-wrap flex-con layout-wrap">
                        <div class="flex-con layout ic-coffee">
                            <h6>编辑学校信息</h6>
                            <p>编辑学校信息</p>
                        </div>
                    </div>
                    <div tapmode="hover" @click="toSceneryEditPage" class="flex-wrap flex-con flex-2 layout-wrap">
                        <div class="flex-con layout ic-shop">
                            <h6>景点维护</h6>
                            <p>维护景点信息</p>
                        </div>
                    </div>
                    <div tapmode="hover" @click="toRouteAddPage" class="flex-wrap flex-con layout-wrap">
                        <div class="flex-con layout ic-like">
                            <h6>添加路线</h6>
                            <p>添加景点之间直接路线</p>
                        </div>
                    </div>
                    <div class="flex-wrap flex-con">
                        <div tapmode="hover" @click="" class="flex-wrap flex-con layout-wrap">
                            <div class="flex-con layout ic-lable">
                                <h6>帮助</h6>
                                <p></p>
                            </div>
                        </div>
                        <div tapmode="hover" @click="" class="flex-wrap flex-con layout-wrap">
                            <div class="flex-con layout ic-more">
                                <h6>建议</h6>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        var app = new Vue({
            el: '#wrap',
            data: {
                school: {},
                editor: null
            },
            methods: {
                toSchoolInfoPage: function() {
                    api.openWin({
                        name: 'school',
                        url: './school.html',
                        pageParam: {
                            name: this.school.name
                        }
                    });
                },
                toSchoolSceneryPage: function() {
                    api.openWin({
                        name: 'scenery',
                        url: './scenery.html',
                        pageParam: {
                            name: this.school.name
                        }
                    });
                },
                toRouteQueryPage: function() {
                    api.openWin({
                        name: 'route_query',
                        url: './route_query.html',
                        pageParam: {
                            name: this.school.name,
                        }
                    });
                },
                toSchoolEditPage: function() {
                    api.openWin({
                        name: 'school_edit',
                        url: './school_edit.html'
                    });
                },
                toSceneryEditPage: function() {
                    api.openWin({
                        name: 'scenery_manage',
                        url: './scenery_manage.html'
                    });
                },
                toRouteAddPage: function() {
                  api.openWin({
                      name: 'route_add',
                      url: './route_add.html',
                      pageParam: {
                          name: this.school.name,
                      }
                  });
                }
            },
        });
        app.school = $api.getStorage('school');
        app.editor = $api.getStorage('editor');
        //$api.css($api.dom("#main .flex-vertical .layout.ic-tag"), 'background-image: url('+ $baseUrl + this.school.schoolplan +')');
        api.toast({
            msg: '欢迎来到' + app.school.name,
            duration: 2000,
            location: 'bottom'
        });
        var mySwipe = new Swipe($api.dom('.swipe'), {
            speed: 400,
            auto: 3000,
            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            transitionEnd: function(index, elem) {

            }
        });

        api.addEventListener({
            name: 'updateStorage'
        }, function(ret, err) {
            editor = $api.getStorage('editor');
            school = $api.getStorage('school');
            if (editor) {
                app.editor = editor;
            } else {
                app.editor = null
            }
            if (school) {
                app.school = school;
            }
        });

        api.setRefreshHeaderInfo({
            //loadingImg: 'widget://image/loading_more.gif',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            refreshSchool(app.school.name)
            setTimeout(function() {
                api.refreshHeaderLoadDone();
            }, 1000);
        });

        function refreshSchool(schoolName) {
            api.ajax({
                url: $baseUrl + 'schools/accurate?name=' + schoolName,
                method: 'get'
            }, function(ret, err) {
                if (ret) {
                    if (ret.data) {
                        $api.setStorage('school', ret.data);
                        app.school = ret.data
                    } else {
                        api.toast({
                            msg: '该学校不存在，请检查学校全称',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                } else {
                    api.toast({
                        msg: '请求异常!',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });
        }
    };
</script>
